<template>
  <!-- :default-openeds="['1', '3']" -->
  <el-aside width="18%" style="background-color: #1d1626">
    <el-menu
      :default-active="$route.path"
      text-color="#ffffff"
      background-color="#1d1626"
      active-text-color="#409EFF"
    >
      <el-submenu
        :index="item.index"
        v-for="item in navMenuData"
        :key="item.index"
      >
        <template slot="title"
          ><i class="el-icon-message"></i>{{ item.templateName }}</template
        >
        <el-menu-item-group :title="item.title">
          <template v-for="groupItem in item.groups">
            <template v-if="groupItem.parent == 0">
              <el-tooltip :content="groupItem.title" placement="right" effect="light">
                
              <el-menu-item
                :index="groupItem.path"
                :key="groupItem.id"
                @click="
                  navMenuEvent({ path: groupItem.path, query: groupItem.query })
                "
                >{{ groupItem.title }}</el-menu-item>
              </el-tooltip>
            </template>
            <template v-else>
              <el-submenu :key="groupItem.id" :index="groupItem.index">
                <template slot="title">
                  {{ groupItem.templateName }}
                </template>

                <el-menu-item-group>
                  <template>
                    <el-menu-item
                      :index="childItem.path"
                      v-for="childItem in groupItem.children"
                      :key="childItem.id"
                      @click="
                        navMenuEvent({
                          path: childItem.path,
                          query: childItem.query,
                        })
                      "
                      >{{ childItem.title }}</el-menu-item
                    >
                  </template>
                </el-menu-item-group>
              </el-submenu>
            </template>
          </template>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>
<style scoped>
.el-aside {
  color: #333;
}
</style>
<script>
import navMenuData from "@components/NavMenu/navMenuIndex.js";
export default {
  data() {
    return {
      navMenuData,
      // menuDefaultActive:sessionStorage.getItem('menuDefaultActive')
      // menuDefaultActive: "/layout/docIndex/markdownReander",
    };
  },
  
  methods: {
    navMenuEvent(paylog) {
      this.$router.push(paylog);
    },
  },
};
</script>